<template>
  <view class="news-item" @click="goToDetail(news.id)">
    <!-- 置顶标签 -->
    <view class="top-tag" v-if="news.isTop">置顶</view>
    <view class="news-content">
      <image class="news-cover" :src="news.cover" mode="aspectFill"></image>
      <view class="news-info">
        <view class="news-title">{{ news.title }}</view>
        <view class="news-meta">
          <text class="news-source">{{ news.source }}</text>
          <text class="news-comment">{{ news.commentCount }}评</text>
          <text class="news-time">{{ news.publishTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      required: true
    }
  },
  methods: {
    goToDetail(newsId) {
      // 跳转到新闻详情页
      uni.navigateTo({
        url: `/pages/news-detail/news-detail?newsId=${newsId}`
      });
    }
  }
};
</script>

<style scoped>
.news-item {
  padding: 15rpx;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}
.top-tag {
  position: absolute;
  left: 15rpx;
  top: 15rpx;
  background: #d00;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  z-index: 1;
}
.news-content {
  display: flex;
  gap: 15rpx;
}
.news-cover {
  width: 200rpx;
  height: 140rpx;
  border-radius: 8rpx;
}
.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.news-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  line-height: 44rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}
.news-source {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-comment, .news-time {
  margin-left: 15rpx;
}
</style>